import React, { useState } from "react";
import './style.css'

export const Tabs = ({ children }) => {
	const [activeIndex, setActiveIndex] = useState(0)

  return (
		<div className="tab">
			<div className="title">
				{ children.map((v, i) => {
					return	<b key={i} className={ activeIndex === i ? 'active': '' } onClick={ () => setActiveIndex(i) }>{v.props.title}</b>
				}) }
			</div>
			<div className="content">
				{
					children[activeIndex]
				}
			</div>
		</div>
	);
};

interface ItemProps {
  title: string;
  contentStyle: any;
  children: React.ReactNode
}

const Item: React.FC<ItemProps> = ({ children, contentStyle }) => {
  return <div style={ contentStyle }>
		{
			children
		}
	</div>;
};

Tabs.Item = Item;
